<template>
	<view>
		<view class="header">
			<view class="successText">支付成功</view>
			<view class="successText-1">
				<image src="../../static/@1/zhifuwancheng _slices/wancheng.png">
				</image>
			</view>
			<view class="successText-2">支付成功</view>
			<view class="successText-3">支付成功</view>
		</view>
		<view class="absoImg">
			<image src="../../static/@1/zhifuwancheng _slices/zhingjia .png" mode="">

			</image>
		</view>
		<image src="../../static/@1/zhifuwancheng _slices/wanchengtupian .png" mode="" class="absoImg-1"></image>
		<view class="share">
			<view class="share-1">
				<text class="share-text1">立即分享</text>
				<text class="share-text2">领取豪礼</text>
			</view>
		</view>
		<view class="button-1"><button class="button-1-1">立即分享</button></view>
		<view class="button-2"><button class="button-1-2">返回首页</button></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.header {
		width: 750rpx;
		height: 624rpx;
		background-image: url("../../static/@1/zhifuwancheng _slices/di.png");
		background-size: 100% 100%;
		overflow: hidden;
		position: relative;
	
	.successText {
			width: 100%;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			color: white;
			margin-top: 112rpx;
			margin-bottom: 40rpx;
			font-size: 36rpx;
		}

		.successText-1 {
			height: 96rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				height: 96rpx;
				width: 96rpx;
			}
		}

		.successText-2 {
			width: 100%;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			color: white;
			margin-top: 28rpx;
			margin-bottom: 16rpx;
			font-size: 36rpx;
		}

		.successText-3 {
			width: 100%;
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			color: rgb(255, 195, 126);
			margin-bottom: 16rpx;
			font-size: 32rpx;
		}

	}

	.absoImg {
		width: 100%;
		height: 314rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	    position: absolute;
		left: 0rpx;
		top: 440rpx;
	image {
			height: 314rpx;
			width: 314rpx;
		}
	}
	.absoImg-1 {
		width: 250rpx;
		height: 250rpx;
		position: absolute;
		top: 480rpx;
		left: 254rpx;
	}
	.share{
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		color: rgb(105, 105, 105);
		margin-bottom: 48rpx;
		margin-top: 160rpx;
		font-size: 40rpx;
		.share-1{
			height: 100%;
			width: 334rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			font-weight: bold;
		}
	}
	.button-1{
		height: 90rpx;
		width: 100%;
		margin-bottom: 48rpx;
		.button-1-1{
			background-color: rgb(255, 147, 30);
			width: 542rpx;
			height: 100%;
			border-radius: 60rpx;
			color: white;
			line-height: 90rpx;
			text-align: center;
			margin-right: 104rpx;
		}
	}
	.button-2{
		height: 90rpx;
		width: 100%;
		margin-bottom: 48rpx;
		.button-1-2{
			border: 1px solid  rgb(255, 147, 30);
			width: 542rpx;
			height: 100%;
			border-radius: 60rpx;
			color: rgb(255, 147, 30);
			line-height: 90rpx;
			text-align: center;
			margin-right: 104rpx;
		}
	}
</style>
